<template>
  <div class="statistics">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>项目完成情况</span>
            </div>
          </template>
          <div class="chart-container">
            <div ref="projectChart" style="width: 100%; height: 300px"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>任务分布</span>
            </div>
          </template>
          <div class="chart-container">
            <div ref="taskChart" style="width: 100%; height: 300px"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>资源利用率</span>
            </div>
          </template>
          <div class="chart-container">
            <div ref="resourceChart" style="width: 100%; height: 300px"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>项目归档</span>
              <el-button type="primary" size="small">导出报表</el-button>
            </div>
          </template>
          <el-table :data="archivedProjects" style="width: 100%">
            <el-table-column prop="name" label="项目名称" />
            <el-table-column prop="startDate" label="开始日期" />
            <el-table-column prop="endDate" label="结束日期" />
            <el-table-column prop="status" label="状态">
              <template #default="{ row }">
                <el-tag :type="row.status === '已完成' ? 'success' : 'info'">
                  {{ row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template #default="{ row }">
                <el-button type="primary" link @click="viewArchive(row)">查看</el-button>
                <el-button type="primary" link @click="downloadArchive(row)">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>绩效统计</span>
            </div>
          </template>
          <el-table :data="performanceData" style="width: 100%">
            <el-table-column prop="name" label="成员" />
            <el-table-column prop="completedTasks" label="完成任务数" />
            <el-table-column prop="onTimeRate" label="按时完成率">
              <template #default="{ row }">
                {{ row.onTimeRate }}%
              </template>
            </el-table-column>
            <el-table-column prop="qualityScore" label="质量评分">
              <template #default="{ row }">
                <el-rate v-model="row.qualityScore" disabled />
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const projectChart = ref(null)
const taskChart = ref(null)
const resourceChart = ref(null)

const archivedProjects = [
  {
    id: 1,
    name: '变电站电气安装工程',
    startDate: '2024-01-01',
    endDate: '2024-03-15',
    status: '已完成'
  },
  {
    id: 2,
    name: '配电室改造项目',
    startDate: '2024-02-01',
    endDate: '2024-04-20',
    status: '进行中'
  }
]

const performanceData = [
  {
    id: 1,
    name: '张三',
    completedTasks: 15,
    onTimeRate: 85,
    qualityScore: 4.5
  },
  {
    id: 2,
    name: '李四',
    completedTasks: 12,
    onTimeRate: 90,
    qualityScore: 4.8
  },
  {
    id: 3,
    name: '王五',
    completedTasks: 10,
    onTimeRate: 75,
    qualityScore: 4.2
  }
]

const viewArchive = (project) => {
  // 查看归档详情
  console.log('查看归档:', project)
}

const downloadArchive = (project) => {
  // 下载归档文件
  console.log('下载归档:', project)
}

onMounted(() => {
  // 项目完成情况图表
  const projectChartInstance = echarts.init(projectChart.value)
  const projectOption = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '项目完成情况',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 5, name: '已完成' },
          { value: 3, name: '进行中' },
          { value: 2, name: '已暂停' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  projectChartInstance.setOption(projectOption)

  // 任务分布图表
  const taskChartInstance = echarts.init(taskChart.value)
  const taskOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['待处理', '进行中', '已完成']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['高优先级', '中优先级', '低优先级']
    },
    series: [
      {
        name: '待处理',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [3, 5, 2]
      },
      {
        name: '进行中',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [2, 3, 1]
      },
      {
        name: '已完成',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [4, 2, 3]
      }
    ]
  }
  taskChartInstance.setOption(taskOption)

  // 资源利用率图表
  const resourceChartInstance = echarts.init(resourceChart.value)
  const resourceOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['技术人员', '施工设备', '材料库存']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [85, 45, 90],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  }
  resourceChartInstance.setOption(resourceOption)
})
</script>

<style scoped>
.statistics {
  padding: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  margin-top: 20px;
}
</style> 